<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="450">
      <el-table-column fixed prop="order_sn" label="订单编号"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="receiver_name" label="收货人姓名"/>
      <el-table-column prop="receiver_phone" label="收货人电话"/>
      <el-table-column prop="receiver_detail_address" label="地址"/>
      <el-table-column prop="proname" label="商品名称"/>
      <el-table-column prop="total_amount" label="金额"/>
      <el-table-column prop="payment_time" label="支付时间">
        <template slot-scope="scope">
          <span>{{scope.row.payment_time=='' || scope.row.payment_time==undefined?"未支付":scope.row.payment_time}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="zip" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.payment_time=='' || scope.row.payment_time==undefined"
          @click="toVerOrder(scope.row.id,scope.row.order_sn,scope.row.total_amount)">去支付</el-button>
          <el-button @click="removeOrder(scope.row.order_sn)">取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Order",
  data () {
    return {
      tableData: []
    }
  },
  created() {
    this.getOrder();
  },
  methods: {
    getOrder(){
      console.log("-------------------")
      console.log("id："+sessionStorage.getItem("user_id"));
      let param=new URLSearchParams();
      param.append("id",sessionStorage.getItem("user_id"));
      this.$http.post("/front/order/selectOrder",param).then(data => {
        this.tableData=data;
      })
    },
    removeOrder(value){
      let param=new URLSearchParams();
      param.append("id",1);
      param.append("order_sn",value);
      this.$http.post("/front/order/removeOrder",param).then(data => {
        if (data){
          this.$message({
            type: 'success',
            message: '取消订单成功'
          });
          this.getOrder();
        }else {
          this.$message({
            type: 'error',
            message: '取消订单失败'
          });
        }
      })
    },
    toVerOrder(value1,id,money){
      sessionStorage.removeItem("orderId");
      sessionStorage.removeItem("order_sn");
      sessionStorage.removeItem("money");
      sessionStorage.setItem("orderId",value1);
      sessionStorage.setItem("order_sn",id);
      sessionStorage.setItem("money",money);
      this.$router.push("/verOrder");
    }
  }
}
</script>

<style scoped>

</style>
